import { useStore } from "@/store/index";
const store = useStore();

export const uuid = () => {
  const s: string[] = [];
  const hexDigits = "0123456789abcdef";
  for (var i = 0; i < 32; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  const uuid = s.join("");
  return uuid;
}

// 吸附效果监听
const distant = 10
export const attachListener = () => {
  store.ctx?.clearRect(
    0,
    0,
    store.screenConfig.width,
    store.screenConfig.height
  );
  // 小于指定距离产生吸附效果，并且在两个组件之间创建一个连线
  const widgetConfig: any = store.widgetConfig[store.uuid];
  if (!widgetConfig) return;
  const position = {
    left: widgetConfig.left,
    top: widgetConfig.top,
    bottom: widgetConfig.top + widgetConfig.bottom,
    right: widgetConfig.left + widgetConfig.width,
    width: widgetConfig.width,
    height: widgetConfig.height,
  };
  const anchor = [
    { x: position.left, y: position.top, type: "left-top" },
    { x: position.left + position.width / 2, y: position.top, type: "top-center" },
    { x: position.left + position.width, y: position.top, type: "right-top" },
    {
      x: position.left,
      y: position.top + position.height / 2,
      type: "left-center",
    },
    {
      x: position.left + position.width,
      y: position.top + position.height / 2,
      type: "right-center",
    },
    {
      x: position.left,
      y: position.top + position.height,
      type: "left-bottom",
    },
    {
      x: position.left + position.width / 2,
      y: position.top + position.height,
      type: "bottom-center",
    },
    {
      x: position.left + position.width,
      y: position.top + position.height,
      type: "right-bottom",
    },
  ];
  store.widgetList.forEach((widget: any) => {
    if (widget.uuid === store.uuid) return;
    const widgetConfig = store.widgetConfig[widget.uuid || ""];
    const { left, top, width, height } = widgetConfig;
    const anchorList = [
      { x: left, y: top, type: "left-top" },
      { x: left + width / 2, y: top, type: "top-center" },
      { x: left + width, y: top, type: "right-top" },
      { x: left, y: top + height / 2, type: "left-center" },
      { x: left + width, y: top + height / 2, type: "right-center" },
      { x: left, y: top + height, type: "left-bottom" },
      { x: left + width / 2, y: top + height, type: "bottom-center" },
      { x: left + width, y: top + height, type: "right-bottom" },
    ];
    anchor.forEach((item) => {
      let isChange = false;
      anchorList.forEach((anchorItem) => {
        if (isChange) return;
        const sourcePos = {
          x: item.x,
          y: item.y,
        };
        if (Math.abs(item.x - anchorItem.x) < distant) {
          // 判断是哪个点相同
          if (item.type.includes("left")) {
            // 吸附效果
            store.commit("SET_WIDGET_CONFIG", {
              uuid: store.uuid,
              propsName: "left",
              value: anchorItem.x,
            });
            sourcePos.x = anchorItem.x;
          } else if (
            item.type.includes("right") ||
            item.type.includes("center")
          ) {
            // 吸附效果
            store.commit("SET_WIDGET_CONFIG", {
              uuid: store.uuid,
              propsName: "left",
              value: position.left - (item.x - anchorItem.x),
            });
            sourcePos.x = anchorItem.x;
          }
          isChange = true;
        } else if (Math.abs(item.y - anchorItem.y) < distant) {
          // 判断是哪个点相同
          if (item.type.includes("top")) {
            // 吸附效果
            store.commit("SET_WIDGET_CONFIG", {
              uuid: store.uuid,
              propsName: "top",
              value: anchorItem.y,
            });
            sourcePos.y = anchorItem.y;
          } else if (
            item.type.includes("bottom") ||
            item.type.includes("center")
          ) {
            // 吸附效果
            store.commit("SET_WIDGET_CONFIG", {
              uuid: store.uuid,
              propsName: "top",
              value: position.top - (item.y - anchorItem.y),
            });
            sourcePos.y = anchorItem.y;
          }
          isChange = true;
        }
        if (isChange && store.ctx) {
          store.ctx.strokeStyle = "#6688ee";
          store.ctx.beginPath();
          store.ctx.setLineDash([3, 6]);
          store.ctx.moveTo(sourcePos.x, sourcePos.y);
          store.ctx.lineTo(anchorItem.x, anchorItem.y);
          store.ctx.stroke();
        }
      });
    });
  });
};

export const shapeAdhesionListener = (dragType: string) => {
  store.ctx?.clearRect(
    0,
    0,
    store.screenConfig.width,
    store.screenConfig.height
  );
  const widgetConfig: any = store.widgetConfig[store.uuid];
  if (!widgetConfig) return;
  const position = {
    left: widgetConfig.left,
    top: widgetConfig.top,
    bottom: widgetConfig.top + widgetConfig.bottom,
    right: widgetConfig.left + widgetConfig.width,
    width: widgetConfig.width,
    height: widgetConfig.height,
  };
  const anchor = [
    { x: position.left, y: position.top, type: "left-top" },
    { x: position.left + position.width / 2, y: position.top, type: "top" },
    { x: position.left + position.width, y: position.top, type: "right-top" },
    {
      x: position.left,
      y: position.top + position.height / 2,
      type: "left",
    },
    {
      x: position.left + position.width,
      y: position.top + position.height / 2,
      type: "right",
    },
    {
      x: position.left,
      y: position.top + position.height,
      type: "left-bottom",
    },
    {
      x: position.left + position.width / 2,
      y: position.top + position.height,
      type: "bottom",
    },
    {
      x: position.left + position.width,
      y: position.top + position.height,
      type: "right-bottom",
    },
  ];
  // 获取当前拖拽的点
  const currentAnchor = anchor.find((item) => item.type === dragType);
  if (!currentAnchor) return;
  store.widgetList.forEach((widget: any) => {
    if (widget.uuid === store.uuid) return;
    const widgetConfig = store.widgetConfig[widget.uuid || ""];
    const { left, top, width, height } = widgetConfig;
    const anchorList = [
      { x: left, y: top, type: "left-top" },
      { x: left + width / 2, y: top, type: "top" },
      { x: left + width, y: top, type: "right-top" },
      { x: left, y: top + height / 2, type: "left" },
      { x: left + width, y: top + height / 2, type: "right" },
      { x: left, y: top + height, type: "left-bottom" },
      { x: left + width / 2, y: top + height, type: "bottom" },
      { x: left + width, y: top + height, type: "right-bottom" },
    ];
    // 查找是否存在可以被吸附的锚点
    let isChange = false;
    const sourcePos = {
      x: currentAnchor.x,
      y: currentAnchor.y,
    };
    anchorList.forEach((anchorItem) => {
      if (isChange) return;
      if (Math.abs(currentAnchor.x - anchorItem.x) < distant) {
        if (currentAnchor.type.includes("left")) {
          // 吸附效果
          store.commit("SET_WIDGET_CONFIG", {
            uuid: store.uuid,
            propsName: "left",
            value: anchorItem.x,
          });
          store.commit("SET_WIDGET_CONFIG", {
            uuid: store.uuid,
            propsName: "width",
            value: currentAnchor.x - anchorItem.x + position.width,
          });
          sourcePos.x = anchorItem.x;
          isChange = true;
        } else if (
          currentAnchor.type.includes("right")
        ) {
          // 吸附效果
          store.commit("SET_WIDGET_CONFIG", {
            uuid: store.uuid,
            propsName: "width",
            value: anchorItem.x - position.left,
          });
          sourcePos.x = anchorItem.x;
          isChange = true;
        }
      }
      if (Math.abs(currentAnchor.y - anchorItem.y) < distant) {
        if (currentAnchor.type.includes("top")) {
          // 吸附效果
          store.commit("SET_WIDGET_CONFIG", {
            uuid: store.uuid,
            propsName: "top",
            value: anchorItem.y,
          });
          store.commit("SET_WIDGET_CONFIG", {
            uuid: store.uuid,
            propsName: "height",
            value: currentAnchor.y - anchorItem.y  + position.height,
          });
          currentAnchor.y = anchorItem.y;
          sourcePos.y = anchorItem.y;
          isChange = true;
        } else if (
          currentAnchor.type.includes("bottom")
        ) {
          // 吸附效果
          store.commit("SET_WIDGET_CONFIG", {
            uuid: store.uuid,
            propsName: "height",
            value: anchorItem.y - position.top,
          });
          sourcePos.y = anchorItem.y;
          isChange = true;
        }
      }
      if (isChange && store.ctx) {
        store.ctx.strokeStyle = "#6688ee";
        store.ctx.beginPath();
        store.ctx.setLineDash([3, 6]);
        store.ctx.moveTo(sourcePos.x, sourcePos.y);
        store.ctx.lineTo(anchorItem.x, anchorItem.y);
        store.ctx.stroke();
      }
    })
  })
}

// 锚点拖动方法
// author rengensheng
// 2021-09-12
export const disposeMouseMove = (type: any, store: any, props: any): any => {
  const functions: any = {
    'left-top': function (position: any, mousePosition: any, currentPosition: any) {
      const moveX = currentPosition.x - mousePosition.x
      const moveY = currentPosition.y - mousePosition.y
      mousePosition.x = currentPosition.x
      mousePosition.y = currentPosition.y
      if (moveX < 0 && (position.width - moveX) < 50) {
        // 超出最小宽度
        return
      } else {
        position.width = position.width - moveX
        position.left = position.left + moveX
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'left',
          value: position.left,
        })
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'width',
          value: position.width,
        })
      }
      if (moveY < 0 && (position.height - moveY) < 50) {
        // 超出最小高度
        return
      } else {
        position.height = position.height - moveY
        position.top = position.top + moveY
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'top',
          value: position.top,
        })
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'height',
          value: position.height,
        })
      }
    },
    'top': function (position: any, mousePosition: any, currentPosition: any) {
      const moveY = currentPosition.y - mousePosition.y
      mousePosition.y = currentPosition.y
      if (moveY < 0 && (position.height - moveY) < 50) {
        // 超出最小高度
        return
      } else {
        position.height = position.height - moveY
        position.top = position.top + moveY
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'top',
          value: position.top,
        })
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'height',
          value: position.height,
        })
      }
    },
    'left': function (position: any, mousePosition: any, currentPosition: any) {
      const moveX = currentPosition.x - mousePosition.x
      mousePosition.x = currentPosition.x
      if (moveX < 0 && (position.width + moveX) < 50) {
        // 超出最小宽度
        return
      } else {
        position.width = position.width - moveX
        position.left = position.left + moveX
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'left',
          value: position.left,
        })
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'width',
          value: position.width,
        })
      }
    },
    'right-bottom': function (position: any, mousePosition: any, currentPosition: any) {
      const moveX = currentPosition.x - mousePosition.x
      const moveY = currentPosition.y - mousePosition.y
      mousePosition.x = currentPosition.x
      mousePosition.y = currentPosition.y
      if (moveX < 0 && (position.width + moveX) < 50) {
        // 超出最小宽度
        return
      } else {
        position.width = position.width + moveX
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'width',
          value: position.width,
        })
      }
      if (moveY < 0 && (position.height + moveY) < 50) {
        // 超出最小高度
        return
      } else {
        position.height = position.height + moveY
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'height',
          value: position.height,
        })
      }
    },
    'right': function (position: any, mousePosition: any, currentPosition: any) {
      const moveX = currentPosition.x - mousePosition.x
      mousePosition.x = currentPosition.x
      if (moveX < 0 && (position.width + moveX) < 50) {
        // 超出最小宽度
        return
      } else {
        position.width = position.width + moveX
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'width',
          value: position.width,
        })
      }
    },
    'bottom': function (position: any, mousePosition: any, currentPosition: any) {
      const moveY = currentPosition.y - mousePosition.y
      mousePosition.y = currentPosition.y
      if (moveY < 0 && (position.height + moveY) < 50) {
        // 超出最小高度
        return
      } else {
        position.height = position.height + moveY
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'height',
          value: position.height,
        })
      }
    },
    'right-top': function (position: any, mousePosition: any, currentPosition: any) {
      const moveX = currentPosition.x - mousePosition.x
      mousePosition.x = currentPosition.x
      if (moveX < 0 && (position.width + moveX) < 50) {
        // 超出最小宽度
        return
      } else {
        position.width = position.width + moveX
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'width',
          value: position.width,
        })
      }
      const moveY = currentPosition.y - mousePosition.y
      mousePosition.y = currentPosition.y
      if (moveY < 0 && (position.height - moveY) < 50) {
        // 超出最小高度
        return
      } else {
        position.height = position.height - moveY
        position.top = position.top + moveY
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'top',
          value: position.top,
        })
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'height',
          value: position.height,
        })
      }
    },
    'left-bottom': function (position: any, mousePosition: any, currentPosition: any) {
      const moveX = currentPosition.x - mousePosition.x
      mousePosition.x = currentPosition.x
      if (moveX < 0 && (position.width + moveX) < 50) {
        // 超出最小宽度
        return
      } else {
        position.width = position.width - moveX
        position.left = position.left + moveX
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'left',
          value: position.left,
        })
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'width',
          value: position.width,
        })
      }
      const moveY = currentPosition.y - mousePosition.y
      mousePosition.y = currentPosition.y
      if (moveY < 0 && (position.height + moveY) < 50) {
        // 超出最小高度
        return
      } else {
        position.height = position.height + moveY
        store.commit('SET_WIDGET_CONFIG', {
          uuid: props.widget.uuid,
          propsName: 'height',
          value: position.height,
        })
      }
    },
  }
  return functions[type]
}